{{#ui/ui-toolbar dark=false light=false raised=false large=false bordered=false}}
	{{#if (or hasDocuments pinState.isPinned session.authenticated)}}
		{{#ui/ui-toolbar-dropdown label="Content" arrow=true}}
			{{#attach-popover class="ember-attacher-popper" hideOn="click clickout" showOn="click" isShown=false}}
				<div class="menu">
					{{#if pinState.isPinned}}
						<li class="item" {{action "onUnpin"}}>Remove bookmark</li>
					{{else if session.authenticated}}
						<li class="item" {{action "onPin"}}>Bookmark</li>
					{{/if}}
					{{#if hasDocuments}}
						<li class="item" {{action "onShowExport"}}>Download</li>
					{{/if}}
				</div>
			{{/attach-popover}}
		{{/ui/ui-toolbar-dropdown}}
	{{/if}}

	{{#if permissions.documentAdd}}
		{{#ui/ui-toolbar-dropdown label="New" arrow=true}}
			{{#attach-popover class="ember-attacher-popper" hideOn="click clickout" showOn="click" isShown=false}}
				<div class="menu">
					<li class="item" {{action "onShowEmptyDocModal"}}>Blank canvas</li>
					{{#if hasTemplates}}
						<li class="item" {{action "onShowTemplateDocModal"}}>From template</li>
					{{/if}}
					<li class="item" {{action "onShowImportDocModal"}}>Import files</li>
				</div>
			{{/attach-popover}}
		{{/ui/ui-toolbar-dropdown}}
	{{/if}}

	{{#if (or permissions.spaceOwner permissions.spaceManage)}}
		{{ui/ui-toolbar-icon icon=constants.Icon.Settings color=constants.Color.Green
			tooltip="Space settings" linkTo="folder.settings"}}
	{{/if}}
{{/ui/ui-toolbar}}

<div id="empty-doc-modal" class="modal" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">Blank Canvas</div>
			<div class="modal-body">
				<form onsubmit={{action "onAddEmptyDoc"}}>
					<div class="form-group">
						<label for="empty-doc-name">Document Name</label>
						{{input id="empty-doc-name" type="text" value=emptyDocName placeholder="Enter name" class=(if emptyDocNameError "form-control mousetrap is-invalid" "form-control mousetrap") autocomplete="off"}}
					</div>
				</form>
			</div>
			<div class="modal-footer">
				{{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Cancel dismiss=true}}
				{{ui/ui-button-gap}}
				{{ui/ui-button color=constants.Color.Green light=true label=constants.Label.Add onClick=(action "onAddEmptyDoc")}}
			</div>
		</div>
	</div>
</div>
<div id="template-doc-modal" class="modal" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">From Template</div>
			<div class="modal-body">
				<form onsubmit={{action "onAddTemplateDoc"}}>
					<div class="form-group">
						<label for="template-doc-name">Document Name</label>
						{{input id="template-doc-name" type="text" value=templateDocName placeholder="Enter name" class=(if templateDocNameError "form-control mousetrap is-invalid" "form-control mousetrap") autocomplete="off"}}
					</div>
					<div class="widget-list-picker">
						<ul class="options">
							{{#each templates as |item|}}
								<li class="option {{if item.selected "selected"}}" {{action "onSelectTemplate" item}}>
									<div class="text text-truncate">
										{{item.name}}<br>{{item.excerpt}}
									</div>
									{{#if item.selected}}
										<i class="dicon {{constants.Icon.Tick}}" />
									{{/if}}
								</li>
							{{/each}}
						</ul>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				{{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Cancel dismiss=true}}
				{{ui/ui-button-gap}}
				{{ui/ui-button color=constants.Color.Green light=true label=constants.Label.Add onClick=(action "onAddTemplateDoc")}}
			</div>
		</div>
	</div>
</div>
<div id="import-doc-modal" class="modal" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">Import Files</div>
			<div class="modal-body">
				<div class="import-zone">
					<button id="import-document-button" type="button" class="dmz-button-yellow-light text-center">
						<br>
						Click to select files or drag-drop files
						<br><br>
						.doc, .docx, .md, .markdown
						<br><br>
					</button>
					<div class="import-status">
						{{#each importStatus as |status|}}
							<p>{{status}}</p>
						{{/each}}
					</div>
				</div>
			</div>
			<div class="modal-footer">
				{{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Cancel dismiss=true}}
			</div>
		</div>
	</div>
</div>

<div id="space-export-modal" class="modal" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">Export as HTML</div>
			<div class="modal-body">
				{{#if hasCategories}}
					<p>Export all space content as HTML or select categories.</p>
					{{#each categories as |cat|}}
						{{#ui/ui-checkbox selected=cat.exportSelected}}{{cat.category}}{{/ui/ui-checkbox}}
					{{/each}}
				{{else}}
					<p>All space content will be exported as a single self-enclosed HTML file.</p>
				{{/if}}
			</div>
			<div class="modal-footer">
				{{ui/ui-button color=constants.Color.Gray light=true label=constants.Label.Cancel dismiss=true}}
				{{ui/ui-button-gap}}
				{{ui/ui-button color=constants.Color.Green light=true label=constants.Label.Export onClick=(action "onExport")}}
			</div>
		</div>
	</div>
</div>
